<template>
  <view class="container">
    <scroll-view scroll-y="true" @scrolltolower="lower()">

      <!--            {{ infoList }}-->
      <template v-for="(info, index) in infoList">
        <navigator :url="`/subpages/systemmsgdetail/systemmsgdetail?id=${info.noticeId}`" hover-class="navigator-hover">
          <view class="info">
            <view class="type">
              <u-tag v-if="info.noticeType === '2'" text="公告" type="success" plain plainFill></u-tag>
              <u-tag v-if="info.noticeType === '1'" text="通知" type="warning" plain plainFill></u-tag>
            </view>
            <view class="title">
              {{ info.noticeTitle }}
            </view>
          </view>
        </navigator>
      </template>
    </scroll-view>
  </view>
</template>

<script>
import {getSystemNoticeList} from "@/config/api";

export default {
  data() {
    return {
      total: 0,
      infoList: [],
      pageNum: 1,
      pageSize: 10,
    };
  },
  onPullDownRefresh() {
    console.log('refresh');
    // setTimeout(function () {
    //   uni.stopPullDownRefresh();
    // }, 1000);

    getSystemNoticeList({
      pageNum: this.pageNum,
      pageSize: this.pageSize,
      orderByColumn: "create_time",
      isAsc: "desc"
    }).then(res => {
      this.infoList = res.rows;
      uni.stopPullDownRefresh();
    }).catch(err => {

    })

  },
  onLoad() {
    getSystemNoticeList({
      pageNum: this.pageNum,
      pageSize: this.pageSize,
      orderByColumn: "create_time",
      isAsc: "desc"
    }).then(res => {
      this.infoList = res.rows;
    }).catch(err => {

    })
  },
  methods: {
    lower() {

    }
  }
}
</script>

<style lang="scss">


.container {
  justify-content: unset;
  flex-direction: column;
  align-items: unset;

  .info {
    padding-left: $sys-padding-30;
    padding-right: $sys-padding-30;


    display: flex;
    border-bottom: 1px solid $sys-color-grey-170;
    padding-top: $sys-padding-30;
    padding-bottom: $sys-padding-30;

    .type {
      margin-right: 20rpx;
      width: 100rpx;
      display: flex;
      text-align: center;
    }


    .title {
      width: calc(100% - 120rpx);
      //display: flex;
      //flex-wrap: wrap;
      //align-items: center;
      font-weight: bolder;
      line-height: 30px;


      overflow: hidden; //溢出隐藏
      text-overflow: ellipsis; //超出部分省略号
      white-space: nowrap; //不换行
    }

  }

}
</style>
